<template>
	<u-popup :show="visible" mode="center" @close="close" @open="open" round="6" closeable>
		<view class="popup-bindInviter Column items-center">
			<view class="title flex-row items-center">绑定邀请人</view>

			<view class="popup-item">
				<input class="nr h-[60rpx] w-full" v-model="inviter_code" placeholder="请输入邀请码" />
			</view>

			<button class="popup-btn" hover-class="none" @click="bindInviter">确定</button>
		</view>
	</u-popup>
</template>

<script>
	import {
		apiBindInviter
	} from '@/api/weChat_login.js';

	export default {
		model: {
			prop: 'visible',
			event: 'update:visible'
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				inviter_code: ''
			};
		},
		methods: {
			bindInviter() {
				let that = this;
				if (!that.inviter_code) {
					uni.$u.toast('邀请码不能为空');
					return;
				}

				apiBindInviter({
					inviter_code: that.inviter_code.trim()
				}).then(res => {
					if (!res.code) {
						uni.$u.toast(res.msg);
						return;
					}

					uni.$u.toast("绑定成功");
					that.getUserInfo(); // 重新赋值本地缓存
					setTimeout(() => {
						that.$emit('update:visible', false);
					}, 800)
				}).catch(err => {
					console.log(err);
				})
			},

			getUserInfo() {
				let that = this;
				uni.$u.http.post('/user/getUserInfo').then(res => {
					uni.setStorageSync("inviter", res.data.inviter);
				}).catch(err => {
					console.log(err)
				})
			},

			close() {
				this.inviter_code = '';
				this.$emit('update:visible', false);
			},
			open() {
				this.showPopup = true;
			},
		}
	};
</script>

<style lang="scss">
	.popup-bindInviter {
		width: 84vw;
		border-radius: 8px;
		padding-bottom: 12px;
		overflow: hidden;

		.title {
			flex: 1;
			justify-content: center;
			font-size: 16px;
			font-weight: 550;
			padding: 15px;
		}

		.popup-item {
			width: 65%;
			text-align: center;
			border-bottom: 1px solid #e2e2e2;
			padding-bottom: 8px;
			margin: 16px 0;
		}

		.popup-btn {
			width: 70%;
			text-align: center;
			font-size: 30rpx;
			color: #fff;
			background: #0056FF;
			border-radius: 100rpx;
			margin-top: 12px;
		}
	}
</style>